/*
 * @Title: 景区详情
 * @Created by: ycq
 */
<template>
	<view :class="showXc||showChooseType||showColl||showFx||showTicket?'spot':''">
		<!-- 头部 -->
		<view class="spot-body" >
			<comHeader :config="navConfig"/>
			<view class="header">
				<image class="header-bg" src="../../../static/banner.png" mode=""></image>
				<view class="play" ></view>
				<view class="p-num" @click="play">
					<image src="/static/tupian.png" mode="aspectFit"></image>
					<text>10</text>
				</view>
				<view class="p-num" style="top: 208upx;">
					<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
				</view>
				<!-- <image src="../../../static/fanhui.png" class="back" @click="back"></image> -->
				<view class="header-bottom"></view>
			</view>
			
			<view class="spot-info">
				<text class="name">沈阳故宫</text>
				<view class="spot-info-btn">
					<image v-if="!isFenxiang" src="../../../static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="isFenxiang" src="../../../static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="!isShoucang" @click="coll()" src="../../../static/shoucang.png" mode=""></image>
					<image v-if="isShoucang" @click="coll()"  src="../../../static/shoucang-1.png" mode=""></image>
					<image v-if="!isAdd" src="../../../static/add.png" mode="" @click="addXcType"></image>
					<image v-if="isAdd" src="../../../static/add-1.png" mode="" @click="addXcType"></image>
					<image class="xingcheng" src="../../../static/xingcheng.png" mode="" @click="addXcType"></image>
					<view class="shenqi-btn" @click="toShenqi()">景区神器</view>
				</view>
				<view style="width: 100%;height: 200upx;">
					<view class="address">
						<view class="address-info">
							<image src="../../../static/pos-blue.png" mode=""></image>
							<text class="city">沈阳市沈河区沈阳路171号</text>
							<text class="way">乘坐地铁1号线到怀远门站下，不行787米</text>
							<text class="pl-num">1562条热门评论</text>
						</view>
					</view>
					<view class="begin">
						<text>导航</text>
						<image src="/static/jiantou.png" mode=""></image>
					</view>
				</view>
				
				<view class="list-title">
					<text class='shu'></text>
					<text>语音导览</text>
					<image class="plays" src="/static/map/play.png" mode="" @click="toAudio"></image>
					<view class="en" :class="lanIndex==1?'lan-ac':''" @click="chooseLan(1)">English</view>
					<view class="zh " :class="lanIndex==0?'lan-ac':''"  @click="chooseLan(0)">普通话</view>
				</view>
				
				<view class="list-title">
					<text class='shu'></text>
					<text>景区简介</text>
					<!-- <view class="audio-btn" @click="toAudio">语音导览</view> -->
				</view>
				<view @click="openJJ=!openJJ" :class="openJJ?'des-open':'des'">
					<text>       
						沈阳故宫位于辽宁省沈阳市沈河区，是中国仅存的两大宫殿建筑群之一，又称盛京皇宫，为清朝初期的皇宫，距今近400年历史，始建于后金天命十年(1625年)。清朝入关前其皇宫设在沈阳，迁都北京后，是我国仅存的两大宫殿建筑群之一。
					</text>
					<view class="detail-tip">
						<image class="down" src="/static/d-down.png" :style="{transform:(openJJ?'rotate(180deg)':'')}" mode=""></image>
						<view class="more-detail">{{openJJ?'收起详情':'更多详情'}}</view>
					</view>
				</view>
				
			</view>
			<view class="spot-list">
				<view class="list-title" style="margin-left: 0;">
					<text class='shu'></text>
					<text>门票预订</text>
				</view>
				<!-- <view class="spot-item" v-for="(item,index) in spotData"  :key='index'>
							<text class="title-text" @click="showTicketDetail()">{{item.name}}</text>
							<text class="price">￥{{item.prize}}</text>
							<view class="buy" @click="toOrder">立即预定</view>
				</view> -->
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">成人票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<text class="price">￥58</text>
						<view class="buy" @click="toOrder">立即预定</view>
					</view>
				</view>
				<view class="line"></view>
				
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">学生票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<text class="price">￥45</text>
						<view class="buy" @click="toOrder">立即预定</view>
					</view>
				</view>
				<view class="line"></view>
				
				<view class="ticketAll">
					<view class="ticket"  @click="showTicketDetail()">
						<text class="man">儿童票</text>
						<view class="xuzhi">
							<text class="yuding">最早可订明日票</text>
							<view class="fuli">
								<text class="tui">随时退</text>
								<text class="noneed">无需取票</text>
							</view>
							<view class="overs">
								<text class="payover">已售2549</text>
								<view class="shutiao"></view>
								<navigator url="" class="paymust">购买须知</navigator>
								<image src="../../../static/jiantou.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="money">
						<text class="price">￥30</text>
						<view class="buy" @click="toOrder">立即预定</view>
					</view>
				</view>
				<view class="line"></view>
				
			</view>
			<!-- 评论 -->
			<!-- <view class="list-title">
				<text class='shu'></text>
				<text>热门评论</text>
			</view> -->
			<Comment :itemHandle2='toPl' :isShowPlBox="false" :isShowAllHead="true"  :isShowzan="isShowzan" /> 
			<view class="down-more">
				<image src="/static/d-down.png" mode=""></image>
				<text>下拉查看更多</text>
			</view>
			<view style="height: 19vw;"></view>
		</view>
		<FootMenu />
		<Ticket v-if="showTicket"></Ticket>
		<xing-cheng v-if='showXc'/>
		<xingcheng-type v-if='this.$store.state.showXcType' :config='typeConfig'></xingcheng-type>
		<Collection v-if='showColl' />
		<FoodDetail v-if='showDetail'></FoodDetail>
		<xing-cheng v-if='this.$store.state.showXcType ||showXc'/>
		<popuper v-if='this.$store.state.showAddCuss.show'></popuper>
		<xingcheng-type v-if='showChooseType' :config='typeConfig'></xingcheng-type>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<popuper v-if='showPop'></popuper>
		<audioPlayer ref='audio1' v-if='showAudio' />
		<top-view></top-view>
	</view>
</template>

<script>
	import audioPlayer from '@/components/audioPlayer.vue'
	import Comment from '@/components/Comment.vue'
	import Ticket from	'@/components/ticketDetail.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import popuper from '@/components/Popuper.vue'
	import FoodDetail from '@/components/FoodDetail.vue'
	import XingCheng from '@/components/Xingcheng.vue'
	export default{
		data(){
			return{
				typeConfig:{
					typeId:1
				},
				navConfig:{
					isFixed:false,
					comScroll:200,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				type: '', //uniPopup组件类型
				// showPop:false,
				showXc:false,
				openJJ:false,
				lanIndex:0,
				showAudio:false,
				showDetail:false,
				showChooseType:false,
				showColl:false,
				isFenxiang:true,
				tester:this.$store.state.showXcType,
				showFx:false,
				isShoucang:false,
				showTicket:false,
				isAdd:false,
				isShowzan:true, //评论组件是否展示点赞评论icon
				spotData:[
					{
						// name:'成人票',
						prize:58,
					},
					{
						// name:'学生票',
						prize:30,
					},
					{
						// name:'儿童票',
						prize:30,
					},
				],
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			change(e) {
				this.current = e.detail.current;
			},
			toPl(){
				uni.navigateTo({
					url:'/pages/common/evaluation'
				})
			},
			play(){
				uni.navigateTo({
					url:'/pages/home/hotel/photo'
				})
			},
			showTicketDetail(){
				this.showTicket = true
				
			},
			closeTicket(){
				this.showTicket = false
				document.body.style.overflow = 'scroll'
			},
			toShenqi(){
				uni.navigateTo({
					url:'map/map?showAll=true'
				})
			},
			coll(){
				
				this.showColl=true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			toOrder(){
				uni.navigateTo({
					url:'spotOrder'
				})
			},
			toOrderByXc(){
				uni.navigateTo({
					url:'spotOrder?xcId=1'
				})
			},
			// toAudio(){
			// 	uni.navigateTo({
			// 		url:'audio/spotAudio'
			// 	})
			// },
			closeXc(){
				this.showXc=false
				document.body.style.overflow = 'scroll'
			},
			toDate(){
				uni.navigateTo({
					url:'/pages/common/date'
				})
			},
			
			addXcType(){
				this.showChooseType=true
			},
			closeXcType(){
				this.showChooseType=false
				this.$store.commit('showXcTypeUpdate',false)
				document.body.style.overflow = 'scroll'
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				document.body.style.overflow = 'scroll'
				this.$refs[type].close()
				
				
			},
			toAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=true
			},
			closeAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=false
			},
			morePl(){
				uni.navigateTo({
					url:'/pages/common/evaluation?tip=false',
				})
			},
			chooseLan(index){
				this.lanIndex = index
			},
		},
		mounted() {
			// console.log('666'+this.$store.state.showXcType)
			// if(this.$store.state.showXcType){
			// 	this.addXcType()
			// }
		},
		created() {
			console.log("6666:"+this.$store.state.showAddCuss.show)
			// this.showPop = this.$store.state.showAddCuss.show
			document.body.style.overflow = 'scroll'
		},
		computed: {
			showPop() {
				return this.$store.state.showAddCuss.show
			}
		},
		watch:{
			showPop: function(a, b) {
			},
			tester:function(){
				this.addXcType()
				this.$store.commit('showXcTypeUpdate',false)
			}
		},
		components:{
			Comment,
			Ticket,
			uniPopup,
			popuper,
			audioPlayer
		}
	}
</script>

<style scoped>
	.ticketAll{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items:center;
	}
	.ticket{
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		margin-top: 30upx;
		margin-left: 20upx;
	}
	.ticket .man{
		font-size: 32upx;
		color: #010101;
	}
	.xuzhi{
		display: flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
		width:520upx; 
	}
	.overs{
		display: flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:center;
	}
	.yuding{
		font-size: 26upx;
		color: #5694FF;
		margin-top: 25upx;
		margin-left: -335upx;
	}
	.fuli{
		display: flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:center;
	}
	.tui{
		font-size: 26upx;
		color: #5694FF;
		margin-top: 25upx;
		margin-left: -260upx;
	}
	.noneed{
		font-size: 26upx;
		color: #999999;
		margin-top: 25upx;
		margin-left: 30upx;
	}
	.payover{
		font-size: 26upx;
		font-family: PingFang SC Regular;
		color: rgba(171,171,171,1);
		margin-top: 25upx;
		margin-left: -255upx;
	}
	.shutiao{
		width: 5upx;
		height: 26upx;
		background:#ABABAB;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	.paymust{
		font-size: 26upx;
		color: #999999;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	.xuzhi image{
		width: 18upx;
		height: 23upx;
		margin-top: 26upx;
		color: #559EFF;
		/* background: rgba(85,167,255,1); */
		margin-left: 10upx;
	}
	.money{
		display: flex;
		flex-direction:column;
		justify-content:flex-end;
		align-items:center;
	}
	.line{
		width: 658upx;
		height: 1upx;
		background: rgba(240,240,240,1);
		margin-left: 25upx;
		margin-top: 40upx;
	}
	.spot{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.spot-body{
		width: 100%;
		height: 100vh;
		position: absolute;
	}
	.header{
		width: 750upx;
		height: 575upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 575upx;
		position: absolute;
	}
	.back{
		width: 30upx;
		height: 36upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.play{
		position: absolute;
		top:295upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}

	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		position: absolute;
	}
	.spot-info{
		width: 750upx;
		height: auto;
		background: #FFFFFF;
	}
	.name{
		font-size: 32upx;
		margin-left: 37upx;
		height: 30upx;
		float: left;
		font-weight: bold;
		margin-right: 0;
	}
	
	.spot-info-btn{
		width: 710upx;
		height: 37upx;
		padding-top: 80upx;
		margin-left: 37upx;
		
	}
	.spot-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.shenqi-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		margin-top: -10upx;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		margin-right: 40upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	.address{
		margin-top: 30upx;
		margin-left: 37upx;
		width: 450upx;
		height: auto;
		display: table;
		float: left;
	}
	.address-info{
		width: 450upx;
		height: auto;
		float: left;
	}
	.address-info image{
		float: left;
		width: 26upx;
		margin-top: 10upx;
		height: 30upx;
	}
	.city{
		float: left;
		font-size: 30upx;
		height: 30upx;
		
		margin-left: 20upx;
	}
	.way{
		width: 450upx;
		display: block;
		margin-top: 60upx;
		margin-left: 50upx;
		font-size: 24upx;
		color: #888888;
	}
	.pl-num{
		font-size: 24upx;
		color: #888888;
		margin-left: 90upx;
	}
	.begin{
		width: 80upx;
		height: 60upx;
		float: right;
		margin-top: 40upx;
		line-height: 60upx;
		margin-right: 24upx;
	}
	.begin text{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		float: left;
	}
	.begin image{
		width: 25upx;
		margin-top: 20upx;
		height: 25upx;
		float: right;
	}
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 103upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.audio-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		padding-left: 0;
		margin-top: 5upx;
		padding-right: 0;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.des text{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-align:justify;
		text-indent:56upx;
		height: auto;
		font-size: 28upx;
		margin-top: 20upx;
		color: #888888;
	}
	.des-open text{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		display: block;
		text-align:justify;
		text-indent:56upx;
		height: auto;
		font-size: 28upx;
		color: #888888;
	}
	.detail-tip{
		margin-top: 20upx;
		display: flex;
		flex-direction:row;
		align-items:center;
		justify-content:center; /*对齐方式*/
		
	}
	.detail-tip .down{
		width: 22upx;
		height: 22upx;
		min-width: 14px;
		min-height: 14px;
	}
	.detail-tip .more-detail{
		font-size: 28upx;
		color: #D9D9D9;
	}
	/* 房间预定 */
	.spot-list{
		width: 690upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80upx;
		height: auto;
	}
	.spot-item{
		width: 690upx;
		height: 80upx;
		border-radius: 40upx;
		background: #F6F6F6;
		margin-top: 50upx;
	}
	.title-text{
		font-size: 28upx;
		float: left;
		margin-left: 60upx;
		line-height: 80upx;
	}
	.price{
		font-size: 32upx;
		line-height: 80upx;
		color: #DD540A;
		float: left;
		margin-right: 15upx;
		margin-top: 50upx;
	}
	.buy{
		width: 138upx;
		height: 60upx;
		color: #FFFFFF;
		font-size: 24upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		margin-right: 10upx;
		line-height: 60upx;
		margin-top: 15upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.quxiao{
		font-size: 28upx;
		color: #000000;
		margin-top: 20upx;
		float: left;
	}
	/* 热门评论 */
	.down-more{
		width: 750upx;
		height: 30upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content:center;
		margin-top: 50upx;
	}
	.down-more image{
		width: 24px;
		height: 20px;
		margin-right: 30upx;
		
		/* padding-top: 30upx; */
		
	}
	.down-more text{
		
		font-size: 28upx;
		line-height: 35upx;
		color: #D3D2D2;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
	.plays{
		width: 58upx;
		height: 58upx;
		float: right;
		margin-right: 31upx;
		margin-left: 26upx;
	}
	.lan-ac{
		border: #54B1FF solid 1upx;
		color: #54B1FF;
		
	}
	.zh,.en{
		width: 141upx;
		height: 44upx;
		border: #999999 solid 1upx;
		border-radius: 20upx;
		color: #999999;
		text-align: center;
		line-height: 44upx;
		font-size: 28upx;
		float: right;
		margin-top: 6upx;
		margin-left: 26upx;
	}
	
</style>
